<template>
	<view class="login-page container">
		<view class="login-main">
			<image class="app-logo" src="/static/logo.png" mode="widthFix"></image>
			<view class="app-name">锦弘商城</view>
			<button class="save-btn yuan-btn btn-success" @click="clickSmallWechatLogin" v-if="!lookFileType">
				<!-- <text class="iconfont">&#xe632;</text> -->
				手机号快捷登录/注册
			</button>
			<button class="save-btn yuan-btn btn-success" @click="oldUserLogin" v-else-if="hasPhone">
				<!-- <text class="iconfont">&#xe632;</text> -->
				手机号快捷登录/注册
			</button>
			<button class="save-btn yuan-btn btn-success" @click="clickError" v-else-if="!userData || !userData.openid">
				<!-- <text class="iconfont">&#xe632;</text> -->
				手机号快捷登录/注册
			</button>
			<button class="save-btn yuan-btn btn-success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				v-else>
				手机号快捷登录/注册
			</button>

			<view class="cancel-btn yuan-btn btn-default" @click="clickCancel">取消</view>
			<view class="file-tips" @click="lookFile">
				<checkbox style="transform:scale(0.8)" :checked="lookFileType" />
				<text>我已阅读并同意</text>
				<text class="c-primary" @click.stop="jumpService">《用户服务协议》</text>
				<text>和</text>
				<text class="c-primary" @click.stop="jumpPrivacy">《隐私政策》</text>
			</view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getSmallWxCode, getStorage, goBack, hideLoading, setStorage, showLoading, showToast } from '@/common/util';
	import commonStore from '../../store/commonStore';
	import api from '@/common/api';

	const lookFileType = ref(false)
	const lookFile = () => {
		lookFileType.value = !lookFileType.value
	}

	const doLogin = async (userInfo : any) => {
		// 保存登录信息
		setStorage("userAuth", userInfo);
		showLoading()
		try {
			commonStore.commit('reloadAll')
			let back = getCurrentPages()
			if (back && back.length > 1) {
				uni.navigateBack()
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}

		} finally {
			hideLoading()
		}
	}
	const clickSmallWechatLogin = () => {
		if (!lookFileType.value) {
			showToast('请同意用户协议和隐私政策')
			return
		}
	}
	const clickError = () => {
		showToast('登录失败，请联系工作人员')
	}
	const getPhoneNumber = (res) => {
		if (res.detail && res.detail.errMsg === 'getPhoneNumber:ok') {
			doSmallWechatLogin(res.detail.code)
		}
	}
	const doSmallWechatLogin = async (phoneCode : string) => {
		showLoading()
		try {
			const res = await api.userBindPhone({
				...userData,
				code: phoneCode,
			})
			const data = res.data || {}

			if (res.code === 200) {
				showToast('登录成功', {}, () => {
					doLogin({ ...data })
				})
			}

		} finally {
			hideLoading()
		}
	}
	const oldUserLogin = () => {
		showToast('登录成功', {}, () => {
			doLogin(userData)
		})
	}
	let userData : any = {}
	let hasPhone = ref(false)
	const getSmallWechatInfo = async (code : string) => {
		showLoading()
		try {
			const res = await api.login({ code })
			const data = res.data || {}
			if (data && data.phone) {
				//如果有手机号，等待用户点击登录
				userData = data
				hasPhone.value = true

			} else {
				// 没有手机号，等待获取用户手机
				userData = data
			}

		} finally {
			hideLoading()
		}
	}
	onMounted(() => {
		//判断用户是否已经登录 已经登录 直接跳转
		let userAuth = getStorage('userAuth') || {}
		if (userAuth && userAuth.token) {
			doLogin(userAuth)
			return
		}

		getSmallWxCode((code : string) => {
			console.info(code)
			// code给后台获取用户openId
			getSmallWechatInfo(code)
		})
	})

	const clickCancel = () => {
		goBack()
	}
	const jumpService = () => {
		uni.navigateTo({
			url: '/pages/public/service'
		})
	}
	const jumpPrivacy = () => {
		uni.navigateTo({
			url: '/pages/public/service'
		})
	}
</script>

<style lang="scss">
	.login-page {
		height: 100%;
		background-color: #fcfcfc;

		.login-main {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.app-logo {
			width: 200rpx;
			height: 200rpx;
		}

		.app-name {
			margin-top: 0rpx;
			font-size: 38rpx;
			color: #333;
		}



		.save-btn {
			width: 70%;
			height: 80rpx;
			margin-top: 60rpx;

			.iconfont {
				margin-right: 10rpx;
			}
		}

		.cancel-btn {
			width: 70%;
			height: 80rpx;
			margin-top: 30rpx;
			color: #666
		}


		.file-tips {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 26rpx;
			color: #666;
			margin-top: 30rpx;
		}

		.file-tips::before {
			display: inline-block;
			content: '';
			position: absolute;
			height: 60rpx;
			width: 60rpx;
			z-index: 10;
			left: 8%;
			top: 0
		}

	}
</style>